<template>
  <div id="zong">
    <div id='zong-zhe'></div>
    <div id="tittle-xiang">
      <div id="left" @click="back()">⬅</div>
      <div id="top">驾校详情页</div>
    </div>
    <div id="jia-kuang">
      <div id="img">
        <img class="img" :src="bg()" alt="" />
        <div id="numk">1/{{ imageCount }}</div>
      </div>
      <div id="mid">
        <div id="na">
          <div id="name">{{ arr.name }}</div>
          <div v-if="arr.certificationStatus" id="tp-v"></div>
        </div>
        <div class="ping">
          <span>评分{{ arr.score }}</span> <span id="left">|</span>
          <span id="left">排名{{ arr.cityRank }}</span
          ><span id="left">|</span><span id="left">{{ studentCount }}学员</span>
        </div>
      </div>
      <div id="zhi">
        <div id="dizhi">{{ arr.address }}</div>
        <div @click="map()" id="map">-1 -></div>
      </div>
      <div v-if="this.allLabels.length">
        <div id="tag" @click="tapxian()">
          <div id="tag-mid">
            <div v-for="(all, i) in allLabels" :key="i">
              <div id="xiao">
                <img id="pic" :src="url(i)" alt="" />
                <div>{{ all.labelDetail }}</div>
              </div>
            </div>
          </div>
          <div id="xiang"><div id="xiang-mid">></div></div>
        </div>
      </div>
      <div id="ban">
        <div
          v-for="(ban, i) in banarr"
          @click="banji(i)"
          :class="{ bot: num == i }"
          :key="i"
        >
          {{ ban }}
        </div>
      </div>
      <div v-show="num == 0">
        <div
          id="noplace"
          v-if="xingarr.length == 0"
        >
          <img class="noplace" src="@/assets/noban.png" alt="" />
        </div>
        <div id="banxing" v-for="(xing, i) in xingarr" :key="i">
          <div id="xing-left" @click="xingqing(i)">
            <div id="xing-cu">{{ xing.name }} ￥{{ xing.price }}</div>
            <div>
              {{ xing.type }} {{ xing.studentsPerCarDesc }}
              {{ xing.pickUpTypeName }}
            </div>
          </div>
          <div id="xqzixun" @click.stop="zixun()">详情咨询</div>
        </div>
        <div @click="quanbu()" id="allcha" v-if="duan()">
          查看全部班型(共{{ courseCount }}个)>
        </div>
      </div>
      <div v-show="num == 1">
        <div v-for="(lian, i) in jiaolianarr.slice(0, 3)" :key="i">
          <div id="jiaolianid">
            <div id="cur-pic"><img :src="cur(i)" alt="" /></div>
            <div id="cur-miao">
              <div id="miao-left">
                <img id="jiao-pic" :src="jq(lian)" alt="" />
              </div>
              <div id="miao-right">
                <div>
                  <div id="lian-name">{{ lian.name }}</div>
                  <div id="year">{{ lian.teachAge }}年教龄</div>
                </div>
                <div id="jiao-start">
                  <start :scorer="lian.score"></start
                  ><span>{{ lian.score }}分</span>
                </div>
                <div>学员{{ lian.studentCount }}</div>
              </div>
            </div>
            <div>
              <div id="loginLiveness">{{ lian.loginLiveness }}</div>
              <div>
                <img :src="gold(i)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div id="allcha">查看全部教练（共{{ rankCoachCount }}个）</div>
      </div>
      <div v-show="num == 2">
        <div
          id="noplace"
          v-if="trainFields.length == 0 || examFields.length == 0"
        >
          <img class="noplace" src="@/assets/noplace.png" alt="" />
        </div>
        <div v-if="trainFields.length">
          <div id="lian">
            <div id="xl">
              <div id="xlc">训练场</div>
              <div>
                <div
                  @click="kaoa(i)"
                  id="xlcn"
                  v-for="(lian, i) in trainFields.slice(0, 2)"
                  :key="i"
                >
                  <div id="xlcn-left">
                    <img id="xlcn-pic" :src="xlcn(i)" alt="" />
                  </div>
                  <div id="xlcn-right">
                    <p id="p-lian">{{ lian.name }}</p>
                    <div id="address">{{ lian.address }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="examFields.length">
          <div id="lian">
            <div id="xl">
              <div id="xlc">考场</div>
              <div>
                <div
                  @click="kao(i)"
                  id="xlcn"
                  v-for="(exam, i) in examFields.slice(0, 1)"
                  :key="i"
                >
                  <div id="xlcn-left">
                    <img id="xlcn-pic" :src="xcn(i)" alt="" />
                  </div>
                  <div id="xlcn-right">
                    <p id="p-lian">{{ exam.name }}</p>
                    <div id="address">{{ exam.address }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="allcha" v-if="trainFields.length > 2">
          查看全部训练场(共{{ trainFields.length }}个)>
        </div>
      </div>
      <div v-show="num == 3">
        <div id="jj" :style="{ height: hei }">
          {{ introduction }}
          <div id="more">
            <span @click="wzx()">{{ more }}</span>
          </div>
        </div>
      </div>
      <div>
        <div id="student">
          <div id="dianpingCount">
            学员评价(<span class="dianpingCount">{{ dianpingCount }}</span
            >)
          </div>
          <div id="pinjiashu">
            <div v-for="(shu, i) in dianpingTagList" :key="i">
              {{ shu.cname }} {{ shu.count }}
            </div>
          </div>
          <pingjia></pingjia>
        </div>
        <div id="shouji">-信息由驾校发布或来自互联网，仅供参考-</div>
      </div>
      <div v-show="che" id="tabxian"></div>
      <div v-show="pan" id="tabnottom">
        <div id="bottom-top">
          <span @click="tapxian()" id="top-x">x</span>
          <span id="top-name">{{ arr.name }}</span>
        </div>
        <div id="bottom-bottom">
          <div v-for="(all, i) in allLabels" :key="i">
            <div id="xiao-b">
              <img id="pic-b" :src="url(i)" alt="" />
              <div id="wen-b">
                <div>{{ all.labelDetail }}</div>
                <div id="co">{{ all.description }}</div>
              </div>
            </div>
          </div>
        </div>
        <div id="know">
          <div @click="tapxian()" id="know-mid">
            <span>知道了</span>
          </div>
        </div>
      </div>
    </div>
    <div id="bm-jia" @click="zixun()">报名咨询</div>
    <zixun @pan="zixun()" v-if="zixuan"></zixun>
  
  </div>
</template>

<script>
import zixun from "../components/zixun.vue";
import start from "../components/start.vue";
import pingjia from "../components/pingjia.vue";
export default {
  name: "jiaxiang",
  data() {
    return {
      banarr: ["班型", "教练", "场地", "简介"],
      arr: [],
      imageCount: "0",
      backgroundSize: "100%" + " " + "100%",
      allLabels: [],
      dianpingTagList: [],
      studentCount: "",
      pan: false,
      che: false,
      num: 0,
      xingarr: [],
      courseCount: 0,
      code: 0,
      zixuan: false,
      jiaolianarr: [],
      rankCoachCount: 0,
      trainFields: [],
      examFields: [],
      jiaxiaoId: "",
      longitude: "",
      latitude: "",
      introduction: "",
      more: "更多》》",
      long: 1,
      hei: "5vh",
      dianpingTagList: [],
      pingjianum: 0,
      dianpingCount: 0,
    };
  },
  methods: {
    wzx() {
      if (this.long) {
        this.hei = "100%";
        this.more = "收起《《";
        this.long = 0;
      } else {
        this.hei = "5vh";
        this.long = 1;
        this.more = "更多》》";
      }
    },
    kao(i) {
      this.$router.push({
        name: "baidu",
        params: {
          latitude: this.examFields[i].latitude,
          longitude: this.examFields[i].longitude,
        },
      });
    },
    kaoa(i) {
      this.$router.push({
        name: "baidu",
        params: {
          latitude: this.trainFields[i].latitude,
          longitude: this.trainFields[i].longitude,
        },
      });
    },
    xlcn(i) {
      return this.trainFields[i].logo;
    },
    xcn(i) {
      return this.examFields[i].logo;
    },
    bg() {
      return this.background;
    },
    jq(lian) {
      return lian.avatar;
      // return require(url)
    },
    gold(i) {
      if (this.jiaolianarr.slice(0, 3)[i].goldCoach) {
        return require("@/assets/gold.png");
      }
      if (this.jiaolianarr[i].score == 5) {
        return require("@/assets/fivestart.png");
      } else {
        return require("@/assets/renzheng.png");
      }
    },
    cur(i) {
      if (i == 0) {
        return require("@/assets/first.png");
      }
      if (i == 1) {
        return require("@/assets/second.png");
      }
      if (i > 1) {
        return require("@/assets/three.png");
      }
    },
    zixun(msg) {
      this.zixuan = !this.zixuan;
    },
    xingqing(i) {
      this.$router.push({
        name: "xiangqing",
        params: {
          xiang: this.xingarr[i],
        },
      });
    },
    back() {
      this.$router.push({ name: "jiaxiao" });
    },
    quanbu() {
      this.$router.push({ name: "quanbu", params: { code: this.code } });
    },
    duan() {
      return this.courseCount > this.xingarr.length;
    },
    jieshou() {
      this.code = sessionStorage.getItem("id");
      this.latitude = sessionStorage.getItem("latitude");
      this.longitude = sessionStorage.getItem("longitude");
    },
    banji(i) {
      this.num = i;
    },
    map() {
      this.$router.push({
        name: "baidu",
        params: {
          latitude: this.latitude,
          longitude: this.longitude,
          arr: this.arr,
        },
      });
    },
    huoqu() {
      this.allLabels = [];
      console.log(this.allLabels);
      this.axios
        .get(
          `/api/web/v3/jiaxiao/view-rank.htm?_r=16702936200940031068&jiaxiaoId=${this.code}&latitude=${this.latitude}&longitude=${this.longitude}`
        )
        .then((res) => {
          console.log(res);
          this.introduction = res.data.data.introduction;
          this.arr = res.data.data;
          this.dianpingTagList = this.arr.dianpingTagList;
          this.dianpingCount = this.arr.dianpingCount;
          // console.log(res.data.data);
          this.trainFields = res.data.data.trainFields; //训练场数据
          this.examFields = res.data.data.examFields; //考场数据
          // console.log(this.examFields);
          // console.log(this.trainFields);
          this.background = res.data.data.jiaxiaoCover.imageUrl;
          // console.log("获取图片");
          this.rankCoachCount = res.data.data.rankCoachCount;
          this.imageCount = res.data.data.imageCount;
          this.code = res.data.data.jiaxiaoId;
          for (var i = 0; i < res.data.data.allLabels.length; i++) {
            if (
              res.data.data.allLabels[i].label == 1 ||
              res.data.data.allLabels[i].label == 2 ||
              res.data.data.allLabels[i].label == 3 ||
              res.data.data.allLabels[i].label == 6
            ) {
              // console.log("填入");
              this.allLabels.push(res.data.data.allLabels[i]);
            }
          }
          this.dianpingTagList = res.data.data.dianpingTagList;
          this.studentCount = res.data.data.studentCount;
          this.xingarr = res.data.data.courses;
          this.courseCount = res.data.data.courseCount;
          this.jiaolianarr = res.data.data.rankCoachList;
        });
    },
    url(i) {
      return this.allLabels[i].iconUrl;
    },
    tapxian() {
      this.pan = !this.pan;
      this.che = !this.che;
    },
    number() {
      this.num = 0;
    },
  },
  components: {
    zixun,
    start,
    pingjia,
  },
  watch: {
    $route(to, from) {
      console.log(from.path);
      if (to.path == "/jiaxiang") {
        this.jieshou();
        this.huoqu();
      }
      if (from.path == "/") {
        this.long = 1;
        this.more = "更多》》";
        this.hei = "5vh";
        this.number();
      }
    },
  },
  created() {
    this.jieshou();
    this.huoqu();
  },
};
</script>

<style>
#jia-kuang {
  overflow-y: scroll;
}
#zong {
  overflow: hidden;
}
#tittle-xiang {
  width: 100vw;
  height: 5vh;
  background: rgb(29, 172, 249);
  font-size: 4vw;
  color: white;
  line-height: 5vh;
  text-align: center;
  display: flex;
  z-index: 9999;
  position: fixed;
}
.img {
  width: 100%;
  height: 34vh;
}
#img {
  margin-top: 5vh;
  width: 100%;
  height: 34vh;
  position: relative;
}
#numk {
  position: absolute;
  bottom: 2vh;
  right: 2vh;
  width: 15%;
  height: 10%;
  background: rgba(57, 57, 57);
  text-align: center;
  color: white;
  border-radius: 15px;
}
#mid {
  width: 100%;
  height: 13vh;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
}
#na {
  width: 40%;
  margin-top: 3vh;
  margin-left: 2.5vw;
  font-size: 2.9vh;
  display: flex;
}
#tp-v {
  margin-left: 2vw;
  margin-top: 1vh;
  width: 25px;
  height: 25px;
  background: url(../assets/v.png);
  background-position: center;
}
.ping {
  margin-top: 1vh;
  margin-left: 2.5vw;
  color: rgb(210, 210, 210);
}
#left {
  margin-left: 2.5vw;
}
#zhi {
  width: 100%;
  height: 8vh;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
  display: flex;
}
#dizhi {
  margin-top: 2.5vh;
  width: 70%;
  height: 4vh;
  margin-left: 3.5vw;
  font-size: 2.2vh;
  line-height: 4vh;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
#map {
  margin-top: 2.5vh;
  width: 20%;
  height: 4vh;
  margin-left: 8vw;
  font-size: 2.2vh;
  line-height: 4vh;
}
#tag {
  width: 100%;
  height: 10vh;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
  display: flex;
}
#pic {
  width: 3vh;
  height: 3vh;
  margin-top: 1vh;
}
#tag-mid {
  width: 80%;
  height: 60%;
  display: flex;
  margin-top: 2vh;
}
#tag-mid > div {
  width: 100%;
  font-size: 1.8vh;
  line-height: 5vh;
}
#xiao {
  margin-left: 3vw;
  display: flex;
}
#xiang {
  width: 20%;
}
#xiang-mid {
  margin-top: 3vh;
  margin-left: 8vw;
}
#tabxian {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: rgb(0, 0, 0, 0.5);
}
#tabnottom {
  left: 0;
  right: 0;
  bottom: 0;
  top: 52vh;
  position: fixed;
  z-index: 9999;
  background: white;
}
#bottom-top {
  width: 100%;
  height: 8vh;
}
#bottom-top > span {
  font-size: 3.5vh;
  font-weight: 700;
  line-height: 8vh;
}
#top-x {
  margin-left: 4vw;
}
#top-name {
  margin-left: 30vw;
}
#xiao-b {
  margin-top: 2vh;
  margin-left: 3vw;
  display: flex;
}
#pic-b {
  width: 3.5vh;
  height: 3.5vh;
}
#wen-b {
  margin-left: 5vw;
}
#co {
  color: rgb(122, 122, 122);
}
#know {
  width: 100%;
  height: 10vh;
}
#know-mid {
  margin: 30px auto;
  border-radius: 30px;
  width: 50%;
  height: 60%;
  background-image: linear-gradient(
    to right,
    rgb(0, 222, 229),
    rgb(0, 142, 248)
  );
  text-align: center;
}
#know-mid > span {
  font-size: 3vh;
  line-height: 5vh;
  color: white;
}
#ban {
  width: 100%;
  height: 6vh;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
}
#ban > div {
  text-align: center;
  width: 10%;
  line-height: 5vh;
  height: 100%;
}
.bot {
  border-bottom: 0.5vh solid black;
}
#banxing {
  width: 100%;
  display: flex;
  height: 10vh;
}
#xing-left {
  width: 70%;
  height: 80%;
  margin-top: 2vh;
  margin-left: 2vw;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
}
#xing-cu {
  font-weight: 700;
}
#allcha {
  width: 100%;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
}
#xqzixun {
  width: 20%;
  height: 50%;
  border: 1px solid red;
  margin-top: 2vh;
  border-radius: 2vh;
  color: red;
  text-align: center;
  line-height: 4vh;
}
#bm-jia {
  width: 100%;
  height: 6vh;
  position: fixed;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to right,
    rgb(0, 222, 229),
    rgb(0, 142, 248)
  );
  text-align: center;
  line-height: 6vh;
  color: white;
  font-size: 3vh;
}
#jiaolianid {
  width: 100%;
  height: 15vh;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
  display: flex;
}
#cur-pic {
  width: 8vw;
  height: 100%;
  margin-left: 4vw;
  padding-top: 5vh;
}
#cur-miao {
  margin-left: 2vw;
  height: 100%;
  width: 50%;
  display: flex;
}
#miao-left {
  width: 30%;
  height: 100%;
  padding-top: 3.2vh;
}
#jiao-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
}
#miao-right {
  margin-left: 2vw;
  width: 70%;
  height: 100%;
}
#miao-right > div {
  display: flex;
}
#year {
  margin-top: 3.3vh;
  font-size: 1vh;
  height: 3vh;
  margin-left: 2vw;
  border: 0.1vh solid rgba(57, 179, 250, 0.671);
}
#lian-name {
  font-weight: 600;
  height: 20%;
  font-size: 18px;
  margin-top: 3vh;
}
#jiao-start {
  display: flex;
}
#loginLiveness {
  margin-top: 3vh;
}
#lian {
  width: 100%;
  border-bottom: 0.1vh solid rgb(238, 238, 238);
}
#xlc {
  width: 100%;
  line-height: 8vh;
  font-size: 18px;
}
#xl {
  width: 85%;
  margin: 0 auto;
}
#xlcn {
  display: flex;
  height: 16vh;
}
#xlcn-left {
  width: 30%;
  height: 90%;
  margin-top: 1vh;
}
#xlcn-right {
  width: 70%;
  height: 90%;
  margin-top: 1vh;
}
#xlcn-pic {
  width: 90%;
  height: 70%;
}
#address {
  width: 100%;
  height: 25%;
  flex-wrap: nowrap;
  overflow: hidden;
}
#p-lian {
  font-weight: 700;
  font-size: 15px;
}
#jj {
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  padding-bottom :4vh; ;
}
#more {
  background-color: white;
  height: 3vh;
  line-height: 3vh;
  text-align: right;
  width: 100%;
  bottom: 0;
  position: absolute;
  color: rgb(29, 172, 249);
}
#student {
  width: 95%;
  margin: 0 auto;
}
#dianpingCount {
  font-size: 18px;
}
.dianpingCount {
  font-weight: 600;
}
#pinjiashu {
  width: 95%;
  margin: 1vh auto;
  height: 5vh;
  display: flex;
}
#pinjiashu > div {
  font-size: 2.5vh;
  line-height: 5vh;
  background: rgb(244, 247, 247);
  text-align: center;
  border-radius: 38%;
  margin-left: 2vw;
}
#shouji {
  width: 100%;
  height: 15vh;
  text-align: center;
  background-color: rgb(244, 247, 247);
  color: rgb(153, 153, 153);
  line-height: 10vh;
}
#noplace {
  width: 100%;
  height: 42vh;
}
.noplace {
  width: 100%;
  height: 100%;
}
/* #zong-zhe{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  z-index: 9999;
  background:red;
  background-size: 100% 100%;
} */
</style>
